<template>
  <div class="regionaldistribution-section">
    <div id="regionaldistribution"></div>
  </div>
</template>

<script setup>
import echarts from "@/utils/echarts";
import { ref, onMounted } from "vue";
let regionaldistributionEChart = null;

const getData = async () => {
  // disposalLoading = true
  // let res = await countDisposalDataStatistics(data);
  // if (res.code == 200) {
  //   disposalData = [
  //     { name: "核查", value: res.data.inspect },
  //     { name: "处置", value: res.data.strike },
  //     // { name: '驱离', value: res.data.strike },
  //   ];
  // } else {
  //   disposalData = [
  //     { name: "核查", value: 0 },
  //     { name: "处置", value: 0 },
  //     // { name: '驱离', value: 0 },
  //   ];
  // }
  initEchart();
};

const initEchart = () => {
  console.log("zhixign");
  regionaldistributionEChart = null;
  echarts.init(document.getElementById("regionaldistribution")).dispose();
  regionaldistributionEChart = echarts.init(
    document.getElementById("regionaldistribution")
  );

  var salvProName = [
    "安徽省",
    "河南省",
    "浙江省",
    "湖北省",
    "贵州省",
    "江西省",
    "江苏省",
    "四川省",
    "云南省",
    "湖南省",
    "杭州市",
  ];
  var salvProValue = [239, 181, 154, 144, 135, 117, 74, 72, 67, 55, 10];

  let total = salvProValue.reduce((accumulator, currentValue) => {
    return accumulator + currentValue;
  }, 0);
  console.log("total", total);
  let proportionValue = salvProValue.map((item, index) => {
    return item / total;
  });

  console.log("proportionValue", proportionValue);

  var salvProMax = []; //背景按最大值
  for (let i = 0; i < salvProValue.length; i++) {
    salvProMax.push(1);
  }
  let option = {
    grid: {
      left: "2%",
      right: "2%",
      bottom: "-5%",
      top: "2%",
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "none",
      },
      formatter: function (params) {
        return params[0].name + " : " + params[0].value;
      },
    },
    xAxis: {
      show: false,
      type: "value",
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        axisLabel: {
          show: true,
          textStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: salvProName,
      },
      {
        type: "category",
        inverse: true,
        axisLabel: {
          formatter: function (value) {
            return (
              String(value) +
              "家" +
              (value / total > 0.1 ? "   " : "     ") +
              ((value / total) * 100).toFixed(2) +
              "%"
            );
          },
          align: "right", // 设置y轴标签右对齐
          textStyle: {
            color: "#ffffff",
            fontSize: "12",
            verticalAlign: "center", // 垂直居中
          },
          padding: [0, -85, 0, 0], // 加上padding可以调整其位置
        },
        axisTick: "none",
        axisLine: "none",
        show: true,
        data: salvProValue,
      },
      //   {
      //     type: "category",
      //     inverse: true,
      //     axisTick: "none",
      //     axisLine: "none",
      //     show: true,
      //     axisLabel: {
      //       textStyle: {
      //         color: "#ffffff",
      //         fontSize: "12",
      //       },
      //     },
      //     data: salvProValue,
      //   },
    ],
    series: [
      {
        name: "值",
        type: "bar",
        zlevel: 1,
        itemStyle: {
          normal: {
            barBorderRadius: 30,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
              {
                offset: 0,
                color: "rgb(7, 49, 72,1)",
              },
              {
                offset: 1,
                color: "rgb(251, 252, 252,1)",
              },
            ]),
          },
        },
        barWidth: 12,
        data: proportionValue,
      },
      {
        name: "背景",
        type: "bar",
        barWidth: 12,
        barGap: "-100%",
        data: salvProMax,
        itemStyle: {
          normal: {
            color: "rgba(9, 32, 50,1)",
            barBorderRadius: 30,
          },
        },
      },
    ],
  };

  regionaldistributionEChart.setOption(option);
};

onMounted(() => {
  getData();
});
onUnmounted(() => {});
</script>

<style scoped lang="scss">
.regionaldistribution-section {
  position: relative;
  width: 100%;
  height: calc(100% - 30px);
  #regionaldistribution {
    position: relative;
    width: 100%;
    height: 100%;
  }
}
</style>
